<template>
  <div>
    <el-card style="margin: 20px">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
        label-position="top"
      >
        <div class="item">
          <!-- 货品编号 -->
          <el-form-item style="width: 32%" label="货品编码" prop="code">
            <el-input v-model="ruleForm.code" disabled />
          </el-form-item>
          <!-- 货品类型 id 和 名字 都给 -->
          <el-form-item style="width: 32%" label="货品类型" prop="goodsTypeId">
            <el-select
              v-model="ruleForm.goodsTypeId"
              placeholder="请选择"
              style="width: 100%"
              @change="changeGoodsType"
            >
              <el-option
                v-for="item in GoodsTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <!-- 货品名称 -->
          <el-form-item style="width: 32%" label="货品名称" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <!-- 货品条码 -->
          <el-form-item style="width: 32%" label="货品条码" prop="barCode">
            <el-input v-model="ruleForm.barCode" />
          </el-form-item>
        </div>
        <div class="item">
          <!-- 货主 id 和 名字 都给 -->
          <el-form-item style="width: 32%" label="货主" prop="ownerId">
            <el-select
              v-model="ruleForm.ownerId"
              placeholder="请选择"
              style="width: 100%"
              @change="changeOwner"
            >
              <el-option
                v-for="item in ownerList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <!-- 质检方式 -->
          <el-form-item
            style="width: 32%"
            label="质检方式"
            prop="inspectionType"
          >
            <el-select
              v-model="ruleForm.inspectionType"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option label="不处理" value="BCL" />
              <el-option label="全检" value="QJ" />
              <el-option label="抽检" value="CJ" />
            </el-select>
          </el-form-item>
          <!-- 温度要求 -->
          <el-form-item
            style="width: 32%"
            label="温度要求"
            prop="temperatureType"
          >
            <el-select
              v-model="ruleForm.temperatureType"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option label="常温" value="CW" />
              <el-option label="冷藏" value="LC" />
              <el-option label="恒温" value="HW" />
            </el-select>
          </el-form-item>
          <!-- 承重要求 -->
          <el-form-item style="width: 32%" label="承重要求" prop="bearingType">
            <el-select
              v-model="ruleForm.bearingType"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option label="重型" value="ZX" />
              <el-option label="轻型" value="QX" />
              <el-option label="中型" value="BX" />
            </el-select>
          </el-form-item>
        </div>
        <div class="item">
          <!-- 体积 -->
          <el-form-item style="width: 32%" label="体积" prop="volume">
            <el-input v-model="ruleForm.volume">
              <template slot="append">m³</template>
            </el-input>
          </el-form-item>
          <!-- 指定库区 给id -->
          <el-form-item style="width: 32%" label="指定库区" prop="areaId">
            <el-select
              v-model="ruleForm.areaId"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in warehouseArea"
                :key="item.name"
                :label="item.name"
                :value="item.id"
                :disabled="item.id === '111'"
              />
            </el-select>
          </el-form-item>
          <!-- 单价 -->
          <el-form-item style="width: 32%" label="单价" prop="price">
            <el-input v-model="ruleForm.price">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <!-- 单位 -->
          <el-form-item style="width: 32%" label="单位" prop="unit">
            <el-input v-model="ruleForm.unit" />
          </el-form-item>
        </div>
        <div class="item">
          <!-- 保质天数 -->
          <el-form-item style="width: 32%" label="保质天数" prop="guaranteeDay">
            <el-input v-model="ruleForm.guaranteeDay">
              <template slot="append">天</template>
            </el-input>
          </el-form-item>
        </div>
        <el-form-item class="btns">
          <el-button type="primary" @click="submitForm('ruleForm')">
            提交
          </el-button>
          <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
          <el-button @click="$router.back()">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
// 引入 api 接口
import {
  getGoodCode,
  getGoodsType,
  getOwnerList,
  getWarehouseArea,
  addGoods,
  getGoodsDetails,
  editGoods
} from '@/api/goods'
// 引入校验规则集
import rules from '../rules.js'
export default {
  data() {
    return {
      title: '新增货品',
      ruleForm: {
        code: '',
        goodsTypeId: '',
        goodsTypeName: '',
        name: '',
        ownerId: '',
        ownerName: '',
        temperatureType: '',
        inspectionType: '',
        bearingType: '',
        volume: '',
        areaId: '',
        barCode: '',
        price: '',
        unit: '',
        guaranteeDay: ''
      },
      rules,
      GoodsTypeList: [],
      ownerList: [],
      warehouseArea: [{ id: '111', name: '请先选择货主' }]
    }
  },
  async created() {
    // 路由跳转传参 获取id
    const id = this.$route.params.id
    // 货品类型
    this.GoodsTypeList = (await getGoodsType()).data.data
    // 货主
    this.ownerList = (await getOwnerList()).data.data
    // 1. id是null 代表新增 发送请求获取货品编码 2. id不是null 代表编辑 发送请求数据回显
    if (id !== 'null') {
      this.title = '编辑货品'
      const res = (await getGoodsDetails(id)).data.data
      this.warehouseArea = (await getWarehouseArea(res.ownerId)).data.data
      for (const key in this.ruleForm) { this.ruleForm[key] = res[key] }
      // 编辑设置id
      this.ruleForm.id = id
    } else { this.ruleForm.code = (await getGoodCode()).data.data }
  },
  methods: {
    // 货品类型改变
    changeGoodsType(value) {
      this.ruleForm.goodsTypeName = (this.GoodsTypeList.find(item => item.id === value)).name
    },
    // 货主改变
    async changeOwner(value) {
      const owner = this.ownerList.find(item => item.id === value)
      this.ruleForm.ownerName = owner.name
      this.warehouseArea = (await getWarehouseArea(owner.id)).data.data
    },
    // 表单确定按钮
    async submitForm(formName) {
      await this.$refs[formName].validate()
      // 调用接口 发送请求 成功后提示 返回之前的路由界面
      this.title === '新增货品'
        ? await addGoods(this.ruleForm)
        : await editGoods(this.ruleForm)
      this.$message.success(this.title + '成功')
      this.$router.back()
    }
  }
}
</script>
<style scoped lang="scss">
.item {
  display: flex;
  margin: 10px 0;
  > * {
    margin: 0 10px;
  }
}

.btns {
  margin-top: 20px;
  ::v-deep .el-form-item__content {
    display: flex;
    justify-content: center;
    > * {
      margin: 0 10px;
    }
  }
}
</style>
